<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import guangxi from './guangxi.json'
echarts.registerMap('GX', guangxi)
export default {
  name: 'ChartMap',
  props: {
    text: String
  },
  mounted () {
    this.$nextTick(() => {
      let option = {
        title: {
            text: '广西省农业大数据监测点',
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}'
        },
        visualMap: {
            min: 0,
            max: 500,
            text:['High','Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue','yellow', 'orangered']
            }
        },
        geo: {
            silent:false,
            roam: true,
            map: 'GX',
            label: {
                normal:{
                    show: true,
                    color: '#000',
                },
                emphasis: {
                    show: true
                }
            },
            itemStyle: {
                //深色
                hoverAnimation:false,
                normal: {
                    areaColor: '#323c48',
                    borderColor: '#000'
                },
                emphasis: {
                    areaColor: '#2a333d',
                    opacity:0.6
                }
            },
            regions: [//对不同的区块进行着色
                {
                    name: '南宁市',
                    itemStyle: {
                        normal: {
                            areaColor: '#2b97df'
                        }
                    }
                }, {
                    name: '柳州市',
                    itemStyle: {
                        normal: {
                            areaColor: '#a9d6fd'
                        }
                    }
                }, {
                    name: '桂林市',
                    itemStyle: {
                        normal: {
                            areaColor: '#3497df'
                        }
                    }
                }, {
                    name: '梧州市',
                    itemStyle: {
                        normal: {
                            areaColor: '#0d4369'
                        }
                    }
                }, {
                    name: '北海市',
                    itemStyle: {
                        normal: {
                            areaColor: '#005c9b'
                        }
                    }
                }, {
                    name: '防城港市',
                    itemStyle: {
                        normal: {
                            areaColor: '#a9d6fd'
                        }
                    }
                }, {
                    name: '钦州市',
                    itemStyle: {
                        normal: {
                            areaColor: '#0d4369'
                        }
                    }
                }, {
                    name: '贵港市',
                    itemStyle: {
                        normal: {
                            areaColor: '#a9d6fd'
                        }
                    }
                }, {
                    name: '玉林市',
                    itemStyle: {
                        normal: {
                            areaColor: '#2b97df'
                        }
                    }
                },
                 {
                    name: '百色市',
                    itemStyle: {
                        normal: {
                            areaColor: '#a9d6fd'
                        }
                    }
                },
                {
                    name: '贺州市',
                    itemStyle: {
                        normal: {
                            areaColor: '#a9d6fd'
                        }
                    }
                }, {
                    name: '河池市',
                    itemStyle: {
                        normal: {
                            areaColor: '#0d4369'
                        }
                    }
                }, {
                    name: '来宾市',
                    itemStyle: {
                        normal: {
                            areaColor: '#005c9b'
                        }
                    }
                }, {
                    name: '崇左市',
                    itemStyle: {
                        normal: {
                            areaColor: '#005c9b'
                        }
                    }
                },
            ]
        },
        series: [
            {
                name: '监测点',
                type: 'effectScatter',
                coordinateSystem: 'geo',    //参照系：之前设置的geo。
                showEffectOn: 'render',
                rippleEffect: {
                    period:15,
                    scale: 4,
                    brushType: 'fill'
                },
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        color: '#FFC848',
                        shadowBlur: 10,
                        shadowColor: '#333'
                    }
                },
                //这里是api数据接受的的地方
                data:[
                    {name: '南宁市', value: [108.33,22.84,134]},
                    {name: '南宁市1', value: [108.55,22.9,104]},
                    {name: '南宁市2', value: [108.50,22.5,4]},
                    {name: '南宁市3', value: [108.65,23.4,204]},
                    {name: '南宁市4', value: [108.25,23.35,304]},
                    {name: '柳州市', value:[109.4,24.33,289]},
                    {name: '桂林市', value: [110.28,25.29,436]},
                    {name: '梧州市', value: [111.34,23.51,269]},
                    {name: '北海市', value:[ 109.12,21.49,144]},
                    {name: '防城港市', value:[ 108.35,21.78,64]},
                    {name: '钦州市', value: [108.61,21.96,78]},
                    {name: '贵港市', value:[ 109.6,23.10,97]},
                    {name: '玉林市',value: [110.14,22.64,204]},
                    {name: '百色市', value: [106.62,23.91,219]},
                    {name: '贺州市', value: [111.55,24,42,49]},
                    {name: '河池市', value: [108.06,24.7,488]},
                    {name: '来宾市', value: [109.24,23.76,417]},
                    {name: '崇左市', value: [107.37,22.42,222]},
              ],
                symbolSize: 5,    //散点半径
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                hoverAnimation:false,
                silent:false,
                animation:false,
                z:3
            }
        ]
      }
      let map = echarts.init(this.$refs.dom, 'GX')
      map.setOption(option)
      //设置点击事件  
      var that=this;
        map.on('click', function (params) {
            var mapName = params.name;  
            that.$store.commit('getMapName', mapName)
        });
    })
  }
}
</script>

<style lang="less">

</style>
